<template>
  <view class="bigbox">
    <view class="imgbox">
      <u-album :singleSize="350" :urls="urls1" keyName="src2"></u-album>
    </view>
    
    <view class="zhifubox">
        <view class="" style="margin-top: 60rpx;margin-left: 40rpx;">
             <view class="" style="width: 550rpx; display: flex;align-items: center;margin-top: 20rpx;" >
              姓名：
               <u--input
                 placeholder="请输入名字"
                 border="surround"
                 v-model="name"
               ></u--input>
             </view>
             <view class="" style="width: 550rpx; display: flex;align-items: center;margin-top: 20rpx;" >
              电话：
               <u--input
                 placeholder="请输入电话"
                 border="surround"
                 v-model="phone"
               ></u--input>
             </view>
             <view class="" style="width: 550rpx; display: flex;align-items: center;margin-top: 20rpx;" >
              单位：
               <u--input
                 placeholder="请输入单位"
                 border="surround"
                 v-model="type"
               ></u--input>
             </view>
        </view>
            <view class="" style="margin-top: 90rpx;margin-left: 200rpx; font-weight: 600;" >
              缴费金额 ：2000元
            </view>
     <view class="" style="margin-top: 90rpx;">
       <view class="rdbox" v-for="(item,index) in options" @click="current=index">
             <view class="" style="margin-left: 60rpx;">
               {{item.text}}
             </view>
             <view class=""  style="margin-right: 60rpx;">
                   <radio   :checked="index === current" />
             </view>
       </view>
     </view>
    </view>
    
    
    <view class="jfbox">
     立即缴费
    </view>
    
  </view>
</template>

<script>
  import mixins from '@/common/js/mixins';
  export default {
    mixins: [mixins],
    data() {
      return {
        name:'',
        phone:'',
        type:'',
        albumWidth: 0,
        urls1: [{
          src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
        }],
        options: [
              { id: '0', text: "微信支付" },
              { id: '1', text: "支付宝" },
             
            ],
            current:0,
      }

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    height: 88vh;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .imgbox {
    width: 700rpx;
    height: 400rpx;
    margin-bottom: 40rpx;
  }
  .zhifubox {
      margin-top: 20rpx;
      width: 90%;
      height: 700rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .rdbox {
        display: flex;
        justify-content: space-between;
        margin-top: 35rpx;
      }
    }
    .jfbox {
      width: 600rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      margin-left: 30rpx;
      background-color:skyblue;
      border-radius: 40rpx;
      margin-top: 50rpx;
    }
  
  
</style>